<template>
	<section class="list">
		<h3 class="nametitle">{{title}}</h3>
		<aside class="list_main">
      <div class="searchlist pcTime">
        <ul>
          <li class="form-group ">
            <label class="control-label">时间：</label>
            <div class="control-box">
              <el-date-picker v-model="searchTime" type="daterange"  unlink-panels
                              :picker-options="pickerOptions2" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd">>
              </el-date-picker>
            </div>
          </li>
          <button type="button" class="button-primary" @click="search()">搜索</button>
        </ul>
      </div>
      <div class="searchlist mobile_time">
        <ul>
          <li>
            <label class="control-label">开始时间：</label>
            <div class="control-box">
              <div class="el-date-editor el-add-box">
                <i class="el-input__icon el-range__icon el-icon-date"></i>
                <input type="text" class="text" readonly v-model="mobileSearchTime.searchTime2" placeholder="开始时间" @click="changeMobile1"/>
                <calendar
                  v-model="mobileSearchTime.calendarShow"
                  @change="handelChange">
                </calendar>
              </div>
            </div>
          </li>
          <li>
            <label class="control-label">结束时间：</label>
            <div class="control-box">
              <div class="el-date-editor el-add-box">
                <i class="el-input__icon el-range__icon el-icon-date"></i>
                <input type="text" class="text" readonly v-model="mobileSearchTime2.searchTime2" placeholder="结束时间"  @click="changeMobile2"/>
                <calendar
                  v-model="mobileSearchTime2.calendarShow"
                  @change="handelChange2">
                </calendar>
              </div>
            </div>
          </li>
        </ul>
        <button type="button" class="button-primary" @click="search()">搜索</button>
      </div>
			<table class="table" border="1" bordercolor="#e5e5e5">
				<thead>
					<tr>
						<th width="6.5%" class="notclick">序号</th>
						<th width='15%' @click="sort('trademarkName','1')" :class="sortClass=='1' ? 'addSorc' : (sortClass=='1_1' ? 'subSorc' : '')">商标名称</th>
            <th width='15%' @click="sort('tradeImage','2')" :class="sortClass=='2' ? 'addSorc' : (sortClass=='2_1' ? 'subSorc' : '')">图样</th>
						<th width="12.5%" @click="sort('resiterNum','3')"  :class="sortClass=='3' ? 'addSorc' : (sortClass=='3_1' ? 'subSorc' : '')">注册号</th>
						<th width="12.5%" @click="sort('applyDate','4')" :class="sortClass=='4' ? 'addSorc' : (sortClass=='4_1' ? 'subSorc' : '')">申请日期</th>
						<th width="12.5%" @click="sort('area','5')" :class="sortClass=='5' ? 'addSorc' : (sortClass=='5_1' ? 'subSorc' : '')">申请地区</th>
						<th width="12.5%" @click="sort('progressName','6')" :class="sortClass=='6' ? 'addSorc' : (sortClass=='6_1' ? 'subSorc' : '')">目前进度</th>
						<th width="13.5%" @click="sort('catalogName','7')" :class="sortClass=='7' ? 'addSorc' : (sortClass=='7_1' ? 'subSorc' : '')">分类</th>
					</tr>
				</thead>
				<tbody v-if="tableDate && tableDate.length>0">
						<tr  v-for="(item,index) in tableDate">
							<td class='number'>{{(pageSize*(pageNumber-1))+(index+1)}}</td>
							<td>{{item.trademarkName}}</td>
              <td v-if="item.tradeImage!=null && item.tradeImage!=''">
                <img  :src="global.url+item.tradeImage"/>
              </td>
              <td v-else>-</td>
							<td>{{item.resiterNum}}</td>
							<td>{{item.applyDate | formatDate}}</td>
							<td>{{item.area}}</td>
							<td>{{item.progressName}}</td>
							<td>{{item.catalogName}}</td>
						</tr>

				</tbody>
				<tbody v-else>
					<tr>
						<td colspan="7" class="textleft">暂无数据</td>
					</tr>
				</tbody>
			</table>
		</aside>
			<div v-show="allPageSize>1">
				<mo-pages :page-index="pageNumber" :total="total" :page-size="pageSize" @change="pageChange"></mo-pages>
			</div>
	</section>
</template>

<script>
	import moPages from "@/components/pages"
	export default{
		components:{
			moPages:moPages
		},
		data (){
			return {
				//titleName:"你好吗？"
				title:"我的商标",
				pageNumber:1,//当前页码
				pageSize:10,//每页显示的条数
				total:'',//总的条数
				tableDate:[],
				allPageSize:'',
        searchTime:'',
        mobileSearchTime:{
          searchTime2:"",
          calendarShow:false,
        },
        mobileSearchTime2:{
          searchTime2:"",
          calendarShow:false,
        },
        pickerOptions2: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        sortOrder:'asc',
        sortName:'trademarkName',
        sortClass:"1",
			}

		},
    filters:{
      formatDate:function(value){
        if(value!=null && value!=''){
          if(value.indexOf(' ')!=-1){
            value=value.split(" ")[0];
          }
        }
        return value;
      }
    },
		created(){
			this.setTitle();
			this.setActive();
			this.getList();

		},

		methods:{
			setTitle(){
				this.$emit("getTitle",this.title);
			},
			setActive(){
				//设置左侧的菜单高亮
				this.$root.Bus.$emit("nowActive","0101")
			},
			getList(startTime,endTime){
        if(!startTime) startTime='';
        if(!endTime)  endTime='';
				this.$ajax.get(this.global.url+"/api/user/trademarkDOList?pageNumber="+this.pageNumber+"&pageSize="+this.pageSize+"&startTime="+startTime+"&endTime="+endTime+"&sortname="+this.sortName+"&sortOrder="+this.sortOrder).then(res=>{
					let data=res.data;
					this.tableDate=[];
					if(data.code==0){
						if(data.data.records){
							this.tableDate=data.data.records;
						}
						this.total=data.data.total;
						this.allPageSize=data.data.pages;

					}
					else{
						this.total=0;
					}
				}).catch(error=>{
					console.log(error);
				})
			},
			pageChange(page){
				this.pageNumber=page;
        if($(".mobile_time").is(":visible")){
          this.getList(this.mobileSearchTime.searchTime2,this.mobileSearchTime2.searchTime2);
        }
        else{
          if(this.searchTime!=''){
            this.getList(this.searchTime[0],this.searchTime[1]);
          }else{
            this.getList();
          }
        }
			},
      search(){
        this.pageNumber=1;
        if($(".mobile_time").is(":visible")){
          this.getList(this.mobileSearchTime.searchTime2,this.mobileSearchTime2.searchTime2);
        }
        else{
          if(this.searchTime!=''){
            this.getList(this.searchTime[0],this.searchTime[1]);
          }else{
            this.getList();
          }
        }
      },
      handelChange(data,formatDate){
        this.mobileSearchTime.searchTime2=formatDate;

      },
      handelChange2(data,formatDate){
        this.mobileSearchTime2.searchTime2=formatDate;
      },
      changeMobile1(){
        this.mobileSearchTime.calendarShow=true;
      },
      changeMobile2(){
        this.mobileSearchTime2.calendarShow=true;
      },
      sort(sortname,num){
          console.log(sortname);
          if(this.sortName==sortname){
            if(this.sortOrder=='asc'){
              this.sortOrder='desc';
              this.sortClass=num+'_1';
            }
            else{
              this.sortOrder='asc';
              this.sortClass=num;
            }
          }
          else{
            this.sortName=sortname;
            this.sortOrder='asc';
            this.sortClass=num;
          }
        if($(".mobile_time").is(":visible")){
          this.getList(this.mobileSearchTime.searchTime2,this.mobileSearchTime2.searchTime2);
        }
        else{
          if(this.searchTime!=''){
            this.getList(this.searchTime[0],this.searchTime[1]);
          }else{
            this.getList();
          }
        }


      }
		}
	}
</script>

<style scoped>
	.list{
		padding: 2.5rem 7%;
		width: 100%;
		height: 100%;
		overflow-y: auto;
	}
	.list_main{
		width:100%;
		overflow: auto;
		margin-bottom: 1rem;
	}
	.table{
		width:100%;
		min-width: 1000px;
		text-align:center;
		border-collapse:collapse;
		border-spacing:0;
		background: #fff;
		font-size: 14px;
	}
	.table thead th{
		background-color: #53306c;
		color:#fff;
		line-height: 22px;
		padding:0.75rem 1rem;
    cursor: pointer;
    background-position: 95% center;
    background-repeat: no-repeat;
	}
  .table thead th.notclick{
    cursor: default;
  }
  .table thead .addSorc{
    /*background: url("../../assets/asc.png") no-repeat 95% center;*/
    background-image:url("../../assets/asc.png");
    background-size:32px auto;
  }
  .table thead .subSorc{
    background-image:url("../../assets/desc.png");
    background-size:32px auto;
  }
	.table tbody td{
		color:#333333;
		line-height: 22px;
		padding: 0.75rem 1rem;
	}


	.nametitle{
		font-size: 1.5rem;
		color:#53306c;
		text-align: center;
		line-height: 2.5rem;
		margin-bottom: 1.5rem;
		margin-top:1.5rem;
		display: none;
	}
	/*分页的样式*/
	.pages{
		width:90%;
		border-bottom: 1px solid #dee0e3;
		margin: 0px auto;
		padding:13px 24px;
		text-align: center;
		font-size: 0px;
		line-height: 0px;
	}
	.pages ul{
		overflow: hidden;
		display: inline-block;
	}
	.pages li{
		float: left;
		font-size: 14px;
		color:#666666;
		line-height: 40px;
		width:40px;
		height: 40px;
		overflow: hidden;
		text-align: center;
	}
	.pages li.first,.pages li.last{
		width:auto;
		padding: 0px 5px;
	}
	.pages li a{
		display: block;
	}
	.pages li a:hover{
		color:#624279;
	}
	.pages li a img{
		vertical-align: middle;
	}
	.pages .page_item{
		border-radius: 50%;
	}
	.pages .page_item.active{
		background: #624279;

	}
	.pages .page_item.active a{
		color:#fff;
	}
  /*2018-12-17新添加样式 start*/
  .searchlist{
    margin-bottom: 0.5rem;
  }
  .searchlist ul{
    overflow: hidden;
    width:100%;
  }
  .searchlist li{
    /*width:25%;*/
    overflow: hidden;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-direction: row;
    float: left;
    margin-right: 0.5rem;
  }
  .searchlist li .control-label{
    margin-right: 10px;
  }
  .searchlist li .control-box{
    -webkit-flex:1;
    -moz-flex:1;
    -ms-flex:1;
    -o-flex:1;
    flex:1;
  }
  .searchlist .button-primary{
    font-size: 0.7rem;
    color: #fff;
    background: #53306c;
    padding: 0 1rem;
    border: none;
    border-radius: 4px;
    line-height: 2rem;
    height: 2rem;
    overflow: hidden;
    margin-top: 3px;
    margin-bottom: 3px;
    cursor: pointer;
  }
  .searchlist .button-primary:focus{
    border: none;
    outline: none;
  }
  .el-add-box{
    background: #fff;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 3px 10px;
    position: initial !important;
    width:100%;
  }
  .el-add-box input{
    height:1.6rem;
    line-height: 1.6rem;
    font-size: 0.7rem;
    text-align: center;
    border: none;
    padding:0px;
    margin:0px;
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    -o-flex: 1;
    flex:1;
  }

  .control-box >>> .el-date-editor .el-range-separator{
    width:auto !important;
  }
  .mobile_time{
    display: none;
  }
  .mobile_time li{
    width:100%;
    float: none;
    margin-bottom: 15px;
  }
  .mobile_time .button-primary{
    display: block;
    margin: 0 auto;
  }

	@media only screen and (min-width:960px) and (max-width:1440px) {
		.list{
			padding:1.5rem 2rem;
		}
	}
	@media only screen and (min-width: 320px) and (max-width: 959px) {
		.list{
			padding:0rem 1.5rem 1.5rem;
		}
		.nametitle{
			display: block;
		}
	}
  /*2018-12-17新添加样式 end*/
  @media only screen and (min-width:960px) and (max-width:1440px){
    .main{
      padding:1.5rem 2rem;
    }
  }
  @media only screen and (min-width: 320px) and (max-width: 959px) {
    .main {
      padding: 0px 1.5rem 1.5rem 1.5rem;
    }

    .nametitle {
      display: block;
    }

    /*2018-12-17新添加样式 end*/
    @media only screen and (min-width: 960px) and (max-width: 1440px) {
      .main {
        padding: 1.5rem 2rem;
      }
    }
    @media only screen and (min-width: 320px) and (max-width: 959px) {
      .main {
        padding: 0px 1.5rem 1.5rem 1.5rem;
      }

      .nametitle {
        display: block;
      }

      /*2018-12-17新添加样式 start*/
      .mobile_time {
        display: block;
      }

      .pcTime {
        display: none;
      }
      .table tbody .textleft{
        text-align: left;
      }
      /*2018-12-17新添加样式 end*/
    }
  }
</style>
